<template>
	<view :class="theme" class="meal">
		<u-navbar title="服务" leftIconSize="0" :bgColor="theme == 'light' ? '#0071ff' : '#2c2c2c'"
			:safeAreaInsetTop="true" :placeholder="true" titleStyle="color:#fff">
		</u-navbar>


		<view class="switch">
			<u-subsection :list="list" :current="ifService"  bgColor="#dee1e6" inactiveColor="" @change="sectionChange"></u-subsection>
		</view>
		


		<view class="model-content u-flex u-flex-between" v-if="ifService == 0">
			<view class="model-content-item u-m-t-20" v-for="(item,index) in modelList" :key="index"
				:class="{actived:item.id === model.id}" @click="changeModel(item)">
				<image :src="item.img" mode=""></image>
				<view class="model-content-item-title">
					<view class="" style="font-weight: bold;font-size: 32rpx;">
						{{item.name}}
					</view>
					<view class="u-m-t-10 u-font-24">
						{{item.desc || ''}}
					</view>
				</view>
				<view class="model-content-item-btn">
					<u-button size="small" icon="man" text="咨询"></u-button>
				</view>
				<image class="isVip" v-show="item.isVip" src="/static/is_vip.png">
			</view>
		</view>

		<view class="cu-list menu-avatar" style="margin: 10px;border-radius: 5px;" v-for="item,index in mealList"
			:key="index" @click="mealBtn(item)" v-if="ifService == 1">
			<view class="cu-item" style="height: 200rpx;">
				<view class="cu-avatar" style="width: 120rpx;background-color: white;">
					<u--image :showLoading="true" :src="baseImg+item.pkgImg" width="55px" height="55px"
						radius="5px"></u--image>
						<!-- <u--image :showLoading="true" src="/static/cb.png" width="135rpx" height="135rpx"
							radius="5px"></u--image> -->
				</view>
				<view class="content" style="width: 440rpx;left: 170rpx;" >
					<view class="text-grey" style="font-size: 36rpx;font-weight: bold;color: #115256;height: 80rpx;">
						<mp-html :content="item.pkgName"></mp-html>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<mp-html :content="item.pkgMinDesc"></mp-html>
						</view>
						<view class="text-cut text-color" style="margin-left: 20rpx;">
							￥{{item.pkgPrice}}
						</view>
					</view>
				</view>
				<view class="action" style="width: 50rpx;">
						<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>





		<tabbar ref="tabBar" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				ifService: 1,
				mealList: [],
				list: ['专业助理', '服务套餐'],
			}
		},
		onLoad() {
			this.getSetmeal();
		},
		onShow() {

		},
		computed: mapState({
			// 从state中拿到数据 箭头函数可使代码更简练
			tabbar: state => state.tabbar,
			robot: state => state.robot,
			modelList: state => state.modelList,
			model: state => state.model,
		}),

		methods: {
			//获取套餐列表
			async getSetmeal() {
				let {
					data
				} = await uni.$u.http.get("/aiv/pkgData/list");
				this.mealList = data.rows
			},
			//purchase购买
			async purchase(row) {
				let userId = uni.getStorageSync('userInfo').id
				let {
					data
				} = await uni.$u.http.get(`/busi/userPkgOrders/payOrder?userId=${userId}&pkgId=${row.id}`);
			},
			sectionChange(e) {
				console.log(e)
				this.ifService = e
			},
			// 跳转套餐详情
			mealBtn(row) {
				uni.navigateTo({
					url: `/pages/meal/details/index?id=${row.id}&pkgImg=${row.pkgImg}`,
				})
			},

			changeModel(item) {
				if (!this.$login()) {
					return
				}
				let userInfo = uni.getStorageSync('userInfo')
				if (!userInfo.expireTime && item.isVip) {
					uni.showToast({
						title: '会员专享，请先开通会员',
						icon: 'none'
					})
					return
				}
				uni.showModal({
					title: '温馨提示',
					content: '切换AI助理将会清除之前对话，是否确定切换？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('chat')
							this.$store.commit('setModel', item)
							uni.showToast({
								title: '您已成功将AI助手切换为' + item.name,
								icon: 'none'
							})
							setTimeout(() => {
								this.$refs.tabBar.switchTab(this.robot.url)
							}, 1000)

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})

			},
		}

	};
</script>

<style lang="scss" scoped>
	.meal{
		height: 100%;
	}
	.text-color {
		color: #eb3941;
	}

	.switch {
		padding: 30rpx;
	}

	.model {
		&-content {
			display: flex;
			justify-content: center;
			margin: 20rpx 0rpx;
			flex-wrap: wrap;

			&-item {
				display: flex;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
				align-items: center;
				width: 660rpx;
				margin: 15rpx;
				position: relative;
				border: 2px solid #fff;
				background: var(--white);

				&.actived {
					// border: 2px solid $uni-color-primary;
				}

				&-title {
					color: var(--font-black);
					height: 100rpx;
					width: 300rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					text-align: left;
					align-items: flex-start;
				}

				&-btn {}

				image {
					width: 130rpx;
					height: 130rpx;
					border-radius: 10rpx;
					margin: 5rpx 30rpx 5rpx 5rpx;
				}

				view {
					text-align: center;
				}

				.isVip {
					position: absolute;
					top: 20rpx;
					left: 20rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
</style>